<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'

const appStore = useAppStore()
const userStore = useUserStore()

// 清除存储数据的函数（仅在真正需要时清除登录数据）
const clearStorageOnClose = () => {
  console.log('App: 检测到浏览器关闭，但不自动清除登录数据')
  // 不再自动清除登录数据，让登录状态持久化
  // 如果需要清除特定数据，可以在这里添加逻辑
}

// 处理浏览器关闭事件
const handleBeforeUnload = () => {
  console.log('App: 检测到浏览器即将关闭/刷新')
  // 不在页面刷新时清除登录状态
  // clearStorageOnClose()
}

onMounted(() => {
  // 初始化主题
  const savedTheme = localStorage.getItem('graduation_check_theme') || 'light'
  appStore.setTheme(savedTheme)
  
  // 添加全局事件监听
  window.addEventListener('beforeunload', handleBeforeUnload)
  
  console.log('App: 浏览器关闭事件监听器已注册')
})

onUnmounted(() => {
  // 移除事件监听
  window.removeEventListener('beforeunload', handleBeforeUnload)
  
  console.log('App: 浏览器关闭事件监听器已移除')
})
</script>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f5f5f5;
}

#app {
  min-height: 100vh;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 卡片阴影动画 */
.el-card {
  transition: all 0.3s ease;
}

.el-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* 按钮动画 */
.el-button {
  transition: all 0.3s ease;
}

/* 链接样式 */
.el-link {
  text-decoration: none;
}

/* 加载状态 */
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .el-card .el-card__body {
    padding: 15px;
  }
}

/* 数据表格样式 */
.el-table {
  border-radius: 8px;
  overflow: hidden;
}

.el-table .el-table__header th {
  background-color: #fafafa;
  font-weight: 600;
}

/* 表单样式 */
.el-form-item {
  margin-bottom: 20px;
}

.el-input, .el-select {
  border-radius: 6px;
}

/* 消息提示样式 */
.el-message {
  border-radius: 8px;
}

/* 对话框样式 */
.el-dialog {
  border-radius: 12px;
}

/* 工具提示 */
.el-tooltip__popper {
  border-radius: 6px;
}
</style>